/*
 * @Description: 卡详情页面
 * @Author: yingying.fan
 * @Date: 2019-04-02 16:22:28
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-02 16:23:24
 */
<template>
  <div id="app">
    <!-- 卡面信息展示 -->
    <div class="card-wrapper">
      <img
        class="card-bg-img"
        src="./assets/detail_card_bg.png"
      >
      <div>
        <img
          class="card-icon"
          src="./assets/user_icon.png"
        >
        <span class="card-username">{{formatedName}}</span>
      </div>
      <p
        class="cardno"
        v-html="formatedCardNo"
      ></p>
      <p
        class="card-state"
        v-if="stateText"
      >
      </p>
      <p class="baseColorWithActive card-state-text">{{stateText}}</p>
    </div>
    <!-- 广告位 -->
    <banner
      width="9.2rem"
      height="1.333333rem"
      :bannerEnName="bannerName"
      class="card-banner"
    ></banner>
    <!-- 操作列表 -->
    <div
      v-for="(op,index) in opList"
      :key="index"
      class="flex-h flex-vc card-op-line"
      :class="{'xb_border eee':index!==0}"
      @click="goToPage(op.url)"
    >
      <img :src="op.icon">
      <p class="fontsize32 flex1">{{op.text}}</p>
      <i class="iconfont icon-rightangel"></i>
    </div>
  </div>
</template>

<script>
import { Banner } from 'vue-xb-ui-depot'
import { open } from '@/utils/JumpUtils.js'
// 在html中导入slick的样式
export default {
  components: {
    'banner': Banner
  },
  data() {
    return {
      bannerName: window.APP_CLOUD_CARD_DETAIL,
      cardNoSplitNum: 4,
      userName: '',
      cardNo: '2524222590',
      cardState: 0,
      opList: []
    }
  },
  computed: {
    formatedName() {
      if (this.userName) {
        return this.userName.substr(0, 1) + new Array(this.userName.length).join('*')
      } else {
        return ''
      }
    },
    formatedCardNo() {
      if (!this.cardNo) {
        return this.cardNo
      }
      let numStr = (this.cardNo || '').toString()
      let result = ''
      while (numStr.length > this.cardNoSplitNum) {
        result += numStr.substr(0, this.cardNoSplitNum) + '&nbsp;'
        numStr = numStr.substr(this.cardNoSplitNum)
      }
      if (numStr) {
        result += numStr
      }
      console.log('result:', result)
      return 'NO.' + result
    },
    stateText() {
      if (this.cardState === 3) {
        return '已冻结'
      } else {
        return ''
      }
    }
  },
  mounted() {
    this.getCardInfo()
  },
  methods: {
    // 从缓存中获取卡信息
    getCardInfo() {
      let cardInfo = localStorage.getItem('CARD_DETAIL_INFO')
      if (cardInfo) {
        cardInfo = JSON.parse(cardInfo)
        console.log('cardInfo', cardInfo)
        this.userName = cardInfo.userName
        // this.cardNo = cardInfo.showCardNo || cardInfo.cardNo
        this.cardNo = window.getCardNoByCity ? window.getCardNoByCity(cardInfo.cardNo, cardInfo.showCardNo) : cardInfo.cardNo
        this.cardState = cardInfo.state
        this.opList = [
          {
            icon: require('./assets/trip_record.png'),
            text: '行程记录',
            url: 'recordlist.html?_rv=true&cardno=' + this.cardNo
          },
          {
            icon: require('./assets/card_code.png'),
            text: '乘车二维码',
            url: 'xbapp://goback'
          }
        ]

        if (cardInfo.descGo) {
          this.opList.push({
            icon: require('./assets/use_desc.png'),
            text: '使用说明',
            url: cardInfo.descGo
          })
        }
      }
    },
    goToPage(url) {
      if (url) {
        open(url)
      }
    }
  }
}
</script>

<style>
#app {
  padding: 30px;
  box-sizing: border-box;
}
.card-wrapper {
  position: relative;
  overflow: hidden;
  width: 690px;
  height: 330px;
  border-radius: 10px;
  color: #ffffff;
  margin-bottom: 45px;
  font-size: 36px; /*px*/
  background: linear-gradient(111deg, #197efd 0%, #22a4fe 100%);
  -webkit-box-shadow: 0px 10px 10px #dddddd;
  box-shadow: 0px 10px 10px #dddddd;
}
.card-wrapper > div {
  padding: 30px 40px;
}
.card-bg-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.card-icon {
  width: 122px;
  height: 109px;
  margin-right: 20px;
}
.card-username {
  display: inline-block;
  padding-top: 20px;
}
.cardno {
  padding: 0 50px;
  letter-spacing: 7px;
  font-size: 36px; /*px*/
}
.card-state {
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-width: 0 120px 120px 0;
  border-style: solid;
  border-color: transparent #ffffff transparent transparent;
}
.card-state-text {
  /* color: red; */
  /* background-color: #ffffff; */
  position: absolute;
  right: 0;
  top: 20px;
  text-align: center;
  transform: rotate(45deg);
  font-size: 26px; /*px*/
}
.card-banner {
  margin-bottom: 30px;
}
.card-op-line {
  width: 640px;
  height: 120px;
  margin: 0 15px;
  color: #333333;
}
.card-op-line > img {
  width: 60px;
  height: 60px;
  margin: 0 40px 0 10px;
}
.card-op-line > i {
  color: #cccccc;
  font-size: 30px;
}
</style>
